<!--<app-form [widgets]="widgets" (onCancel)="_handleCancel($event)" (onConfirm)="_submitForm($event)"></app-form>-->
<div nz-row>
  <div nz-col [nzSpan]="7">

  </div>
  <div nz-col [nzSpan]="10">
    <div class="form-wrap">
      <form nz-form [formGroup]="validateForm" [nzType]="'horizontal'">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6">
            <label for="userkind" nz-form-item-required>试卷分类</label>
          </div>
          <div nz-form-control nz-col [nzSm]="14" [nzValidateStatus]="getFormControl('userkind')" nzHasFeedback>
            <nz-select formControlName="userkind" formControlName="userkind" [(ngModel)]="formData.userkind" nzAllowClear>
              <nz-option *ngFor="let option of options" [nzLabel]="option.kindName" [nzValue]="option.qkid" [nzDisabled]="option.disabled">
              </nz-option>
            </nz-select>
            <div nz-form-explain *ngIf="getFormControl('userkind').dirty&&getFormControl('userkind').hasError('required')">
              试卷分类必填！
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6">
            <label for="classes" nz-form-item-required>题目类型</label>
          </div>
          <div nz-form-control nz-col [nzSm]="14">
            <nz-checkbox-group formControlName="classes" [(ngModel)]="groups" (ngModelChange)="_getCheckboxVal(groups)"></nz-checkbox-group>
          </div>
        </div>
        <ng-template ngFor let-group [ngForOf]="groups" let-i="index">
          <div nz-form-item nz-row *ngIf="group.checked">
            <div nz-form-label nz-col [nzSm]="6">
              <label for="group{{i}}" nz-form-item-required>{{group.label}}</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" nzHasFeedback>
              <nz-input-number [(ngModel)]="formData.testcaselist[i].number" formControlName="class1" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
            </div>
          </div>
        </ng-template>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6">
            <label for="name" nz-form-item-required>姓名</label>
          </div>
          <div nz-form-control nz-col [nzSm]="14" [nzValidateStatus]="getFormControl('username')" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="username" [(ngModel)]="formData.username"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('required')">
              姓名必填！
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6">
            <label for="phone" nz-form-item-required>电话</label>
          </div>
          <div nz-form-control nz-col [nzSm]="14" [nzValidateStatus]="getFormControl('password')" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="password" [(ngModel)]="formData.password"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">
              电话号码必填！
            </div>
            <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('phone')">
              电话号码格式有误！
            </div>
          </div>
        </div>
        <div nz-form-item nz-row style="margin-bottom:8px;">
          <div class="customize-footer">
            <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="_cancel()">
              返 回
            </button>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="_submitForm()">
              确定
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div nz-col [nzSpan]="7">

  </div>
</div>
